<template>
	<view class="order-page">
		<view class="order-form-container" contenteditable="true" @focus="onFocus" @blur="onBlur">
			<view class="order-form" >
				<!-- 订单号 -->
				<view class="form-item">
					<view>订单号：</view>
					<view>{{ orderNumber }}</view>
				</view>

				<!-- 订单时间 -->
				<view class="form-item">
					<view>订单时间：</view>
					<view>{{ orderTime }}</view>
				</view>

				<!-- 客户名称 -->
				<view class="form-item">
					<view>客户：</view>
					<view>{{ customerName }}</view>
				</view>

				<!-- 产品清单 -->
				<view class="product-list-header">
					<view>产品清单</view>
				</view>
				<view class="product-list">
					<view v-for="(product, index) in orderProducts" :key="index" class="product-item">
						<view class="product-item-row">
							<view>产品：</view>
							<view>{{ product.name }}</view>
						</view>
						<view class="product-item-row">
							<view>条码：</view>
							<view>{{ product.no }}</view>
						</view>
						<!-- <view class="product-item-row">
							<view>规格：</view>
							<view>{{ product.standard }}</view>
						</view> -->
						<view class="product-item-row">
							<view>库存：</view>
							<view>{{ product.stock }}</view>
						</view>
						<view class="product-item-row">
							<view>数量：</view>
							<view>{{ product.quantity }}</view>
						</view>
						<view class="product-item-row">
							<view>单价：</view>
							<view>{{ product.unitPrice }}</view>
						</view>
						<view class="product-item-row">
							<view>金额：</view>
							<view>{{ product.amount }}</view>
						</view>
						<view class="product-item-row">
							<view>税率：</view>
							<view>{{ product.taxPercent }}%</view>
						</view>
						<view class="product-item-row">
							<view>备注：</view>
							<view>{{ product.remark }}</view>
						</view>
					</view>
				</view>
				<!-- 定金金额 -->
				<view class="form-item">
					<view>定金金额(元)：</view>
					<view>{{ depositPrice }}</view>
				</view>
				<!-- 附件地址 -->
				<view class="form-item">
					<view>附件地址：</view>
					<view>{{ fileUrl }}</view>
				</view>

				<!-- 备注 -->
				<view class="form-item">
					<view>备注：</view>
					<view>{{ remark }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getOrderDetails
	} from "@/sheep/api/erp/purchase.js";

	export default {
		data() {
			return {
				orderId: "", // 从路由参数获取订单ID
				orderNumber: "",
				orderTime: "",
				customerName: "",
				depositPrice: 0,
				fileUrl: "",
				remark: "",
				orderProducts: [],
			};
		},

		methods: {
			fetchOrderDetails() {
				console.log('获取到的订单ID:=====' + this.orderId);
				getOrderDetails(this.orderId)
					.then((res) => {
						const order = res.data;
						this.orderNumber = order.no;
						this.orderTime = this.formatDate(new Date(order.orderTime)); // 格式化订单时间
						this.customerName = order.customerName || "未知客户"; // 客户名称为空时显示默认值
						this.depositPrice = order.depositPrice;
						this.fileUrl = order.fileUrl || "无附件";
						this.remark = order.remark || "无备注";

						// 映射产品数据
						this.orderProducts = order.items.map((item) => ({
							name: item.productNames,
							no: item.productBarCode,
							unitName: item.productUnitName,
							standard: item.standard,
							stock: item.stockCount,
							quantity: item.count,
							unitPrice: item.productPrice || 0, // 处理单价为空的情况
							amount: ((item.count || 0) * (item.productPrice || 0)).toFixed(2), // 计算金额
							taxPercent: item.taxPercent,
							remark: item.remark || "无备注",
						}));
					})
					.catch(() => {
						uni.showToast({
							title: "获取订单详情失败",
							icon: "none"
						});
					});
			},
			// 辅助函数：格式化日期
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			// 当元素获得焦点时触发
			onFocus(event) {
				event.target.contentEditable = "true";
			},
			// 当元素失去焦点时触发
			onBlur(event) {
				event.target.contentEditable = "false";
			},
		},
		onLoad() {
			this.orderId = uni.getStorageSync('orderId');
			console.log('获取到的订单ID:', this.orderId);
			this.fetchOrderDetails();
		},
	};
</script>

<style scoped>
	/* 样式不变 */
</style>
 